<template>
  <div class="classifymodel flexC">
    <div class="flex JustifyContentSB" style="padding: 0rem 2.5rem;">
      <div class="img_nav flex2"><img src="../../../assets/img/comprehensive/components/3.png" alt="" /></div>
      <div class="flex2 title_top"> <p class="  Medium font_s40 colorF textC">分类模型</p></div>
      <div class="img_nav1 flex1"><img src="../../../assets/img/comprehensive/components/4.png" alt="" /></div>
      <div class="imgclone"><img src="../../../assets/img/comprehensive/components/clone.png" alt="" /></div>
    </div>
    <div style="padding: 1.5rem;"></div>
    <div class="flexC JustifyContentSB textC ">
      <div class="classify_img flex">
        <div class="flexC flex1 JustifyContentSA" style="padding: 0px 5.5625rem;">
          <div class="flex JustifyContentSB">
            <div class="flex classify_icon">
              <div class="flexC flex1 JustifyContentSA" style="padding: 3.1875rem 0.84375rem;">
                <div class="flex flex1 JustifyContentC AlignItemsC">
                  <p class=" classify_img_p1 Bold font_s18 textC">证照合规风险</p>
                  <p class=" classify_img_p2 Bold font_s18 textC">财务风险</p>
                </div>
                <div class="flex flex1 JustifyContentC AlignItemsC">
                  <p class=" classify_img_p3 Bold font_s18 textC">舆情风险</p>
                  <p class=" classify_img_p4 Bold font_s18 textC">组织风险</p>
                </div>
                <div class="flex flex1 JustifyContentC AlignItemsC">
                  <p class=" classify_img_p5 Bold font_s18 textC">年检风险</p>
                  <p class=" classify_img_p6 "></p>
                </div>
              </div>
            </div>
            <div class="flexC JustifyContentC ">
              <div class="classify_icon_c zhengzhuans"></div>
              <div style="position: relative;  right: 6.1rem;">
                <img src="../../../assets/img/comprehensive/components/classifyModel/16.png" class="classify_icon_image" alt="" />
                <p class="colorF bold textC" style="font-weight:bold; font-size: 1.0625rem;">风险</p>
              </div>
            </div>
            <div class=" flexC JustifyContentC ">
              <div class="classify_icon_d fanzhuans"></div>
              <div style="position: relative; left: 6.3rem;">
                <img src="../../../assets/img/comprehensive/components/classifyModel/17.png" class="classify_icon_image" alt="" />
                <p class="colorF bold textC" style="font-weight:bold;  font-size: 1.0625rem;">信用</p>
              </div>
            </div>

            <div class="flex classify_icon">
              <div class="flexC flex1 JustifyContentSA" style="padding: 3rem 3.8125rem 4.5rem 3.8125rem;">
                <div class="flex flex1 JustifyContentC AlignItemsC"><p class=" classify_img_p7 Medium font_s18 colorF textC">管理规范</p></div>
                <div class="flex flex1 JustifyContentC AlignItemsC"><p class=" classify_img_p7 Medium font_s18 colorF textC">证照合规</p></div>
                <div class="flex flex1 JustifyContentC AlignItemsC"><p class=" classify_img_p7 Medium font_s18 colorF textC">活动正常</p></div>
              </div>
            </div>
          </div>

          <div class="flex JustifyContentSB" style="padding-top: 2.5rem;">
            <div class="flex classify_icon">
              <div class="flexC flex1 JustifyContentSA" style="padding: 3.4375rem 0.8125rem;">
                <div class="flex flex1 JustifyContentC AlignItemsC">
                  <p class=" classify_img_p1a Medium font_s18 colorF textC">年度检查</p>
                  <p class=" classify_img_p2b Medium font_s18 colorF textC">规范评估</p>
                </div>
                <div class="flex flex1 JustifyContentC AlignItemsC">
                  <p class=" classify_img_p3c Medium font_s18 colorF textC">实地检查</p>
                  <p class=" classify_img_p4d Medium font_s18 colorF textC">访谈约谈</p>
                </div>
                <div class="flex flex1 JustifyContentC colorF AlignItemsC">
                  <p class=" classify_img_p5e Medium font_s18 colorF textC">财务审计</p>
                  <p class=" classify_img_p6f "></p>
                </div>
              </div>
            </div>
            <div class=" flexC JustifyContentC ">
              <div class="classify_icon_a zhengzhuans"></div>
              <div style="position: relative; bottom:12.5rem;right: 3rem;">
                <img class="classify_icon_image" src="../../../assets/img/comprehensive/components/classifyModel/14.png" alt="" />
                <p class="font_s22 colorF bold textC " style="font-weight:bold;">动态</p>
              </div>
            </div>

            <div class=" flexC JustifyContentC ">
              <div class="classify_icon_b fanzhuans"></div>
              <div style="position: relative; bottom:12.5rem;left: 3rem;">
                <img class="classify_icon_image" src="../../../assets/img/comprehensive/components/classifyModel/15.png" alt="" />
                <p class="font_s22 colorF bold textC" style="font-weight:bold;">智能</p>
              </div>
            </div>
            <div class="flex classify_icon">
              <div class="flexC flex1 JustifyContentSA" style="padding: 3.9375rem 0rem;">
                <div class="flex flex1 JustifyContentC AlignItemsC">
                  <p class=" classify_img_p7f Bold font_s18 textC">投诉举报</p>
                  <p class=" classify_img_p7f Bold font_s18 textC">6个双推送</p>
                </div>
                <div class="flex flex1 JustifyContentC AlignItemsC">
                  <p class=" classify_img_p7f Bold font_s18 textC">舆情预警</p>
                  <p class=" classify_img_p7f Bold font_s18 textC">证书有效期</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script></script>

<style lang="scss" scoped>
.classifymodel {
  .imgclone {
    position: absolute;
    right: 7rem;
  }
  .title_top {

    background: url(../../../assets/img/comprehensive/components/5.png);
    background-size: 100% 100%;
    font-weight: bold;
  }
  .classify_icon {
    width: 26rem;
    height: 20rem;
    background: url(../../../assets/img/comprehensive/components/classifyModel/2.png) no-repeat;
    background-size: 100% auto;
  }

  .classify_icon_a {
    width: 13rem;
    height: 13rem;
    background: url(../../../assets/img/comprehensive/components/classifyModel/10.png) no-repeat center;
    background-size: 100% 100%;
    position: relative;
    top: -3.5rem;
    right: 3rem;
  }

  .classify_icon_b {
    width: 13rem;
    height: 13rem;
    background: url(../../../assets/img/comprehensive/components/classifyModel/11.png) no-repeat center;
    background-size: 100% 100%;
    position: relative;
    top: -3.5rem;
    left: 3rem;
  }

  .classify_icon_c {
    width: 12rem;
    height: 12rem;
    background: url(../../../assets/img/comprehensive/components/classifyModel/12.png) no-repeat center;
    background-size: 100% 100%;
    position: relative;
    top: 7.5rem;
    right: 6.1875rem;
  }

  .classify_icon_d {
    width: 12rem;
    height: 12rem;
    background: url(../../../assets/img/comprehensive/components/classifyModel/13.png) no-repeat center;
    background-size: 100% 100%;
    position: relative;
    top: 7.5rem;
    left: 6.1875rem;
  }
  /* 圆环 */
  .zhengzhuans {
    animation: App-logo-spin infinite 10s linear;
  }
  .fanzhuans {
    animation: App-logo-spinF infinite 10s linear;
  }

  @keyframes App-logo-spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  @keyframes App-logo-spinF {
    from {
      transform: rotate(360deg);
    }
    to {
      transform: rotate(0deg);
    }
  }
  .classify_icon_image {
    width: 15%;
    height: 52%;
  }

  .classify_img {
    width: 100%;
    height: 100%;
    background: url(../../../assets/img/comprehensive/components/classifyModel/4.png) no-repeat center;
    background-size: 50.25rem auto;
  }

  .classify_img_p1,
  .classify_img_p2,
  .classify_img_p3,
  .classify_img_p4,
  .classify_img_p5,
  .classify_img_p6 {
    width: 9.625rem;
    height: 3.125rem;
    line-height: 3.125rem;
    font-weight: bold;
    margin: 0rem 1.09375rem;
  }

  .classify_img_p1a,
  .classify_img_p2b,
  .classify_img_p3c,
  .classify_img_p4d,
  .classify_img_p5e,
  .classify_img_p6f {
    width: 10rem;
    height: 3.0625rem;
    line-height: 3.0625rem;
    font-weight: 500;
    margin: 0rem 0.90625rem;
  }

  .classify_img_p1 {
    color: #ffc883;
    background: url(../../../assets/img/comprehensive/components/classifyModel/5.png) no-repeat;
    background-size: 100% 100%;
  }

  .classify_img_p2 {
    color: #24f4c2;
    background: url(../../../assets/img/comprehensive/components/classifyModel/6.png) no-repeat;
    background-size: 100% 100%;
  }

  .classify_img_p3 {
    color: #e21e5b;
    background: url(../../../assets/img/comprehensive/components/classifyModel/7.png) no-repeat;
    background-size: 100% 100%;
  }

  .classify_img_p4 {
    color: #febb80;
    background: url(../../../assets/img/comprehensive/components/classifyModel/8.png) no-repeat;
    background-size: 100% 100%;
  }

  .classify_img_p5 {
    color: #24f4c2;
    background: url(../../../assets/img/comprehensive/components/classifyModel/9.png) no-repeat;
    background-size: 100% 100%;
  }

  .classify_img_p7 {
    width: 17.875rem;
    height: 4.3125rem;
    line-height: 4.125rem;
    font-weight: 500;
    background: url(../../../assets/img/comprehensive/components/classifyModel/23.png) no-repeat;
    background-size: 100% 100%;
  }

  .classify_img_p1a {
    background: url(../../../assets/img/comprehensive/components/classifyModel/18.png) no-repeat;
    background-size: 100% 100%;
  }

  .classify_img_p2b {
    background: url(../../../assets/img/comprehensive/components/classifyModel/19.png) no-repeat;
    background-size: 100% 100%;
  }

  .classify_img_p3c {
    background: url(../../../assets/img/comprehensive/components/classifyModel/20.png) no-repeat;
    background-size: 100% 100%;
  }

  .classify_img_p4d {
    background: url(../../../assets/img/comprehensive/components/classifyModel/21.png) no-repeat;
    background-size: 100% 100%;
  }

  .classify_img_p5e {
    background: url(../../../assets/img/comprehensive/components/classifyModel/22.png) no-repeat;
    background-size: 100% 100%;
  }

  .classify_img_p7f {
    width: 10.1875rem;
    height: 5.375rem;
    font-weight: bold;
    color: rgba(164, 245, 255, 1);
    line-height: 5.375rem;
    margin: 0rem 0.625rem;
    background: url(../../../assets/img/comprehensive/components/classifyModel/24.png) no-repeat;
    background-size: 100% 100%;
  }
}
</style>
